<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  // 获取上下文路径
  String contextPath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>学生信息API系统</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 20px;
    }

    .container {
      max-width: 800px;
      margin: 50px auto;
      background: white;
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      overflow: hidden;
    }

    .header {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      color: white;
      padding: 40px;
      text-align: center;
    }

    .header h1 {
      font-size: 2.8em;
      margin-bottom: 15px;
    }

    .header p {
      font-size: 1.2em;
      opacity: 0.9;
    }

    .content {
      padding: 40px;
    }

    .welcome-text {
      text-align: center;
      margin-bottom: 30px;
      font-size: 1.1em;
      line-height: 1.6;
      color: #495057;
    }

    .nav-links {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin: 40px 0;
      flex-wrap: wrap;
    }

    .nav-link {
      display: inline-block;
      padding: 15px 30px;
      background: #007bff;
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-weight: bold;
      transition: all 0.3s ease;
      text-align: center;
      min-width: 200px;
    }

    .nav-link:hover {
      background: #0056b3;
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .nav-link.secondary {
      background: #6c757d;
    }

    .nav-link.secondary:hover {
      background: #5a6268;
    }

    .api-info {
      background: #f8f9fa;
      padding: 25px;
      border-radius: 10px;
      margin-top: 30px;
      border-left: 4px solid #007bff;
    }

    .api-info h3 {
      color: #007bff;
      margin-bottom: 15px;
      text-align: center;
    }

    .api-info ul {
      list-style: none;
      padding-left: 0;
    }

    .api-info li {
      margin: 12px 0;
      padding: 10px 15px;
      background: white;
      border-radius: 5px;
      border-left: 3px solid #4facfe;
    }

    .system-features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-top: 30px;
    }

    .feature-card {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
      border-top: 4px solid #4facfe;
    }

    .feature-card h4 {
      color: #495057;
      margin-bottom: 10px;
    }

    .feature-card p {
      color: #6c757d;
      font-size: 0.9em;
    }

    @media (max-width: 768px) {
      .nav-links {
        flex-direction: column;
        align-items: center;
      }

      .nav-link {
        width: 100%;
        max-width: 300px;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <div class="header">
    <h1>🎓 学生信息API系统</h1>
    <p>基于Java Servlet的RESTful API服务</p>
  </div>

  <div class="content">
    <div class="welcome-text">
      <p>欢迎使用学生信息查询API系统！这是一个基于Java Servlet的RESTful API服务，提供完整的学生信息查询功能。</p>
      <p>系统采用内存数据存储，包含10个示例学生数据，支持多种查询方式。</p>
    </div>

    <div class="nav-links">
      <a href="<%= contextPath %>/api-test.jsp" class="nav-link">🚀 API测试页面</a>
      <a href="<%= contextPath %>/student-list.jsp" class="nav-link secondary">📊 学生列表页面</a>
      <a href="<%= contextPath %>/api/students?action=getAll" class="nav-link" target="_blank">🔗 查看API数据(JSON)</a>
    </div>

    <div class="system-features">
      <div class="feature-card">
        <h4>🔍 多条件查询</h4>
        <p>支持按学号、姓名、班级、专业、性别等多种条件查询</p>
      </div>
      <div class="feature-card">
        <h4>📡 RESTful API</h4>
        <p>规范的RESTful接口设计，返回标准JSON格式数据</p>
      </div>
      <div class="feature-card">
        <h4>⚡ 内存存储</h4>
        <p>使用HashMap模拟数据库，响应快速</p>
      </div>
      <div class="feature-card">
        <h4>🎨 友好界面</h4>
        <p>现代化的响应式界面，操作简单直观</p>
      </div>
    </div>

    <div class="api-info">
      <h3>📚 API 接口列表</h3>
      <ul>
        <li><strong>GET <%= contextPath %>/api/students?action=getAll</strong> - 获取所有学生信息</li>
        <li><strong>GET <%= contextPath %>/api/students?action=getById&id=xxx</strong> - 根据学号查询学生</li>
        <li><strong>GET <%= contextPath %>/api/students?action=getByName&name=xxx</strong> - 根据姓名查询学生</li>
        <li><strong>GET <%= contextPath %>/api/students?action=getByClass&className=xxx</strong> - 根据班级查询学生</li>
        <li><strong>GET <%= contextPath %>/api/students?action=getByMajor&major=xxx</strong> - 根据专业查询学生</li>
        <li><strong>GET <%= contextPath %>/api/students?action=getByGender&gender=xxx</strong> - 根据性别查询学生</li>
        <li><strong>GET <%= contextPath %>/api/students?action=search</strong> - 多条件组合查询</li>
        <li><strong>GET <%= contextPath %>/api/students?action=getClasses</strong> - 获取所有班级列表</li>
        <li><strong>GET <%= contextPath %>/api/students?action=getMajors</strong> - 获取所有专业列表</li>
        <li><strong>GET <%= contextPath %>/api/students?action=getCount</strong> - 获取学生总数</li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>